<template>
  <div class="box">
    <p>热门商家推荐</p>
    <swiper :options="swiperOption">
      <!-- 内容 -->
      <swiper-slide v-for="(page,index) in pages" :key="index">
        <div class="icon_box" v-for="item in page" :key="item.id"> 
          <!-- <span class="iconfont images">&#xe62f;</span> -->
          <img :src="item.icon_url" alt="">
          <span>{{item.icon_text}}</span>
        </div>
      </swiper-slide>
      <!-- 圆点控制 -->
     
    </swiper>
  </div>
</template>

<script>
export default {
  name: "BeautyMid",
  props: {
    list: Array
  },
  data: function () {
    return{
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },
  // 计算属性
  computed: {
    pages: function(){//求页数
      const pages = []
      this.list.forEach((item,index)=>{
        const page = Math.floor(index/5)//求具体的页码
        if(!pages[page]){//逻辑判断
          pages[page] = []
        }
        pages[page].push(item)
        
      })
      return pages
    }
  }
}
</script>

<style scoped>
.box p{
  text-align: left;
  font-size: .35rem;
  margin-top: .2rem;
    border-bottom: .02rem solid #c1b7b7;
}
.swiper-slide img{
  width: 100%;
}
.icon_box{
  width: 20%;
  float: left;
}
.icon_box span{
  display: block;
}
.icon_box img{
  width: .8rem;
}
.swiper-container{
  padding-bottom: .4rem;
   
}
.swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 0;
}
/* .images{
  font-size: 1rem;
} */
</style>